window.onload = function () {
    var item = document.getElementsByClassName("item")
    var it = item[0].getElementsByTagName("div")

    var content = document.getElementsByClassName("content")
    var con = content[0].getElementsByTagName("div")

    for (let i = 0; i < it.length; i++) {
        it[i].onclick = function () {
            for (let j = 0; j < it.length; j++) {
                it[j].className = "";
                con[j].style.display = "none";
            }

            this.className = "active";
            it[i].index = i;
            con[i].style.display = "block";
        }
    }

    // 获取登录相关信息
    var loginName = document.getElementById('login-username');
    var loginPass = document.getElementById('login-password');
    var loginBtn = document.getElementById('login-btn');
    var loginMes = document.querySelector('.login-mes');

    // 获取”账号和密码不能为空“的消息提示框
    var idMes = document.querySelector('.id-mes');
    var pwMes = document.querySelector('.pw-mes');
    var failMes = document.querySelector('.fail-mes');
    var wrongPw = document.querySelector('.wrong-pw');
    var wrongId = document.querySelector('.wrong-id');

    // 获取注册相关信息
    var rgtName = document.getElementById('rgt-username');
    var rgtPass = document.getElementById('rgt-password');
    var rgtBtn = document.getElementById('rgt-btn');
    var rgtMes = document.querySelector('.rgt-mes');

    // 创建变量用于保存新注册的账号密码
    var newCreateName = null;
    var newCreatePass = null;

    function alertMes(obj){
        obj.style.animation = 'attention 2s ease-in-out';
        setTimeout(function () {
            obj.style.animation = null;
        }, 2000)
    }

    // 包含数字或英文
    var tempName = /^\w{5,12}$/;

    // 任意的数字和密码
    var tempPass = /^(\d+[A-z]+|[A-z]+\d+)(\w*)$/;

    // 注册
    rgtBtn.onclick = function () {

        if (rgtName.value == "") {
            alertMes(idMes);
        }
        if (rgtName.value != "" && rgtPass.value == "") {
            alertMes(pwMes);
        }
        if (rgtName.value != "" && rgtPass.value != "" && !tempName.test(rgtName.value)) {
            alertMes(wrongId);
        }
        if (rgtName.value != "" && rgtPass.value != "" && !tempPass.test(rgtPass.value)) {
            alertMes(wrongPw);
        }
        if (tempPass.test(rgtPass.value) && tempName.test(rgtName.value)) {
            newCreateName = rgtName.value;
            newCreatePass = rgtPass.value;
            alertMes(rgtMes);
        }
    }

    // 登录
    loginBtn.onclick = function () {
        if (loginName.value == "") {
            alertMes(idMes);
        }
        if (loginPass.value == "") {
            alertMes(pwMes);
        }

        if (loginName.value != newCreateName || loginPass.value != newCreatePass) {
            alertMes(failMes);
        }

        if (loginName.value == newCreateName && loginPass.value == newCreatePass) {

            alertMes(loginMes);

            // 跳转页面
            setTimeout(function () {
                window.location.href = "../mainPage/mainPage.html?username=" + rgtName.value;
            }, 2000)
        }

    }

    // 页面跳转
    var mpBtn = document.getElementById('main-page-btn');
    var spBtn = document.getElementById('song-page-btn');
    var btBtn = document.getElementById('but-tic-btn');
    var myBtn = document.getElementById('my-btn');

    mpBtn.onclick = function () {
        window.location.href = "../mainPage/mainPage.html"
    }

    spBtn.onclick = function () {
        window.location.href = "../songsPage/songsPage.html";
    }

    btBtn.onclick = function () {
        window.location.href = "../404/404.html"
    }

    myBtn.onclick = function () {
        window.location.href = "../loginPages/loginPages.html"
    }


}


